<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" v-if="basicInfoShow" class="fr" @click="createItems">创建履历</el-button>
    <div class="filter-container" v-if="basicInfoShow">
      <el-input style="width: 260px;" placeholder="输入设备id" clearable class="filter-item" @keyup.enter.native="research"
        @clear="research" v-model="query.machine_id">
      </el-input>
      <el-cascader v-model="query.type_id" filterable style="width: 260px;" placeholder="设备类型" clearable
        class="filter-item" @keyup.enter.native="research" @clear="research" :props="MachineTypeProps"
        :options="MachineType"></el-cascader>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出 </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:content="v">
        <span v-if="v.key == 'seeFiles'">
          <span @click.stop="seeFiles(v.row)" class="icon-class text-blue">
            <svg-icon icon-class="documentation" />
          </span>
        </span>
        <span v-else-if="v.key=='result'" :class="[v.row[v.key]=='1'?'text-label bg-green':'text-label bg-yellow']">
          {{v.row[v.key]== '1'?'解决':'未解决'}}
        </span>
        <span v-else>{{ v.row[v.key] }}</span>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
    <!-- 附件预留 -->
    <previewFiles :previewFilesShow="previewFilesShow" :fildData="fildData" />
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
import previewFiles from '@/views/tpm/components/previewFiles'
import { deleteChildren } from '@/utils/index.js'
export default {
  name: 'serviceResume',
  mixins: [commonMixin],
  components: { previewFiles },
  props: {
    basicInfoShow: {
      type: Boolean,
      default: true,
    },
    deviceId: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      query: {
        machine_id: '',
        page: 1,
        size: 10,
      },
      api: this.$api.TpmAfterSales,
      baseUrl: this.$api.baseUrl,
      name: '售后履历',
      tableProps: {
        border: true,
        opsColWith: 140,
        fixed: false,
        hideOperations: false,
      },
      MachineTypeProps: {
        label: 'machine_type_name',
        value: 'id',
        children: 'child',
        emitPath: false,
      },
      MachineType: [],
      columns: [
        { title: '设备类型', key: 'machine_type_name' },
        { title: '设备编码', key: 'machine_code' },
        { title: '售后日期', key: 'date' },
        { title: '售后人', key: 'contacts' },
        { title: '售后公司', key: 'after_sales_company' },
        { title: '联系方式', key: 'tel' },
        { title: '售后内容', key: 'content' },
        { title: '售后结果', key: 'result' },
        { title: '附件查看', key: 'seeFiles' },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改时间', key: 'modify_time', width: 100 },
      ],
      fields: [
        {
          title: '设备类型',
          key: 'type_id',
          span: 12,
          name: 'cascader',
          props: {
            filterable: true,
            checkStrictly: true,
            props: {
              children: 'child',
              value: 'id',
              label: 'machine_type_name',
              emitPath: false,
            },
          },
          events: {
            change: this.typeChange,
          },
          options: [],
        },
        {
          title: '设备编码',
          key: 'machine_id',
          span: 12,
          name: 'select',
          options: [],
          props: { filterable: true, remote: true, clearable: true },
        },
        { title: '售后日期', key: 'date', span: 12, name: 'date' },
        {
          title: '售后结果',
          key: 'result',
          span: 12,
          name: 'radio',
          options: [
            {
              label: '解决',
              value: '1',
            },
            {
              label: '未解决',
              value: '2',
            },
          ],
        },
        { title: '售后人', key: 'contacts', span: 12 },
        { title: '售后公司', key: 'after_sales_company', span: 12 },
        { title: '联系方式', key: 'tel', span: 12 },
        { title: '售后内容', key: 'content', span: 24, name: 'textarea' },

        {
          title: '上传附件',
          key: 'file_list',
          span: 24,
          name: 'fileUploader',
          tips: '不能大于20M',
          props: {
            action: '',
            // accept: '.jpg,.png,.pdf,',
            limit: 5,
            autoUpload: false,
            multiple: true,
            'on-change': this.uploadOnchange,
            'before-remove': this.beforeRemove,
            'on-preview': this.onPreview,
            'on-exceed': this.handleExceed,
          },
        },
      ],
      // 上传数据
      formData: new FormData(),
      deleteArray: [],
      // 预览组件
      previewFilesShow: false,
      fildData: [],
    }
  },
  computed: {},
  watch: {
    basicInfoShow: {
      immediate: true,
      handler(val, old) {
        if (!val) {
          this.tableProps = {
            border: true,
            opsColWith: 160,
            fixed: false,
            // highlightCurrentRow: true,
            hideOperations: true,
          }
          this.query.machine_id = this.deviceId
          // this.research()
        }
      },
    },
  },
  created() {
    this.getMachineType()
    this.research()
    this.typeChange()
  },
  mounted() {},
  methods: {
    getMachineType() {
      this.$request(this.baseUrl + 'Tpm/MachineType/GetTreeList').then((r) => {
        let tmp = deleteChildren(r, 'child')
        this.MachineType = tmp
        let tmpMa = this.fields.find((i) => i.key == 'type_id')
        tmpMa.options = tmp
      })
    },
    typeChange() {
      let data = {
        machine_type_id: this.data.type_id,
        page: 1,
        size: 100,
      }
      this.$request(this.baseUrl + 'Tpm/Machine/GetList', data, 'post').then((r) => {
        const { list } = r
        let tmp = list.map((i) => ({
          label: i.machine_name,
          value: i.id,
        }))
        this.getFieldConfig('machine_id').options = tmp
      })
    },
    research() {
      this.query.page = 1
      this.list = []
      this.total = 0
      this.getlist()
    },
    getlist() {
      let data = {
        ...this.query,
      }
      this.pageLoading = true
      this.$request(this.api + 'GetTpmAfterSalesLogList', data, 'post')
        .then((r) => {
          const { total, list } = r
          this.total = total
          this.list = list
        })
        .finally(() => {
          this.pageLoading = false
        })
    },
    submit() {
      this.submitLoading = true
      this.data.deleteArray = this.deleteArray
      this.formData.append('model', JSON.stringify(this.data))
      this.$request(this.api + 'SaveTpmAfterSalesLog', this.formData, 'post')
        .then((r) => {
          this.$message.success('操作成功')
          this.editFormVisible = false
          this.deleteArray = []
          this.getlist()
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
    editItem(v) {
      this.pageLoading = true
      this.$request(this.api + 'GetTpmAfterSalesLogById', {
        id: v.id,
      })
        .then((r) => {
          this.data = this.formatAfterGet(r)
          this.editFormVisible = true
        })
        .finally(() => {
          this.pageLoading = false
        })
    },
    deleteItem(v) {
      this.$confirm('确定要删除这条记录？').then(() => {
        this.pageLoading = true
        this.$request(this.api + 'DeleteTpmAfterSalesLog' + '/' + v.id, {}, 'post')
          .then((r) => {
            this.$message.success('操作成功')
            this.getlist()
          })
          .finally(() => {
            this.pageLoading = false
          })
      })
    },
    // 创建数据
    createItems() {
      this.formData = new FormData()
      this.deleteArray = []
      this.createItem()
    },
    // 获取备件状态,可以直接写在table里
    getStatus(val) {
      return '正常'
    },

    //

    // 附件查看
    seeFiles(v) {
      this.$request(this.api + 'GetTpmAfterSalesLogById', {
        id: v.id,
      }).then((r) => {
        const { file_list } = r
        this.fildData = file_list
        this.previewFilesShow = true
      })
    },

    // 上传
    uploadOnchange(file, fileList) {
      let f = file.raw
      const isLt20M = f.size / 1024 / 1024 < 20
      if (!isLt20M) {
        fileList.splice(fileList.indexOf(f), 1)
        return this.$message.error('上传档案大小不能超过 20MB!')
      }
      this.formData.append('files', f)
    },
    // 清除附件
    beforeRemove(file, fileList) {
      return this.$confirm(`确定要删除${file.name}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        if (file.id) {
          // 已经有附件了,进行删除
          this.deleteArray.push(file.id)
        } else {
          this.formData = new FormData()
          // 刚上传没有点确定
          fileList.forEach((i) => {
            if (!i.id && i.name != file.name) {
              this.formData.append('file', i.raw)
            }
          })
        }
      })
    },
    // 预览
    onPreview(file) {
      alert('没有接口看个毛')
    },
    // 超过最大上传数
    handleExceed() {
      return this.$message.warning('最多只能上传5张图片')
    },
  },
}
</script>

<style lang="less" scoped></style>